<template>
	<div class="preview-main" v-if="props.show">
		<!-- <div class="title" v-if="$route.query.method == 'scanPicture'">
			<div>{{ $route.query.storeName }}-{{ $route.query.floor }}楼</div>
			<div>课别陈列图: {{ $route.query.planNo }}</div>
		</div> -->
		<div class="toolbar">
			<el-checkbox-group v-model="checkList" @change="handleCheckChange">
				<el-checkbox
					v-for="item in typeOptions"
					:key="item.value"
					:label="item.label"
					:value="item.value"
				/>
			</el-checkbox-group>
			<ul class="flex" v-if="$route.query.method === 'scanPicture'">
				<li class="flex" v-for="(item, index) in statusColorList" :key="index">
					<div
						:style="{
							width: '50px',
							height: '20px',
							background: item.color,
							margin: '0 10px',
						}"
					></div>
					<span>{{ item.name }}</span>
				</li>
			</ul>
			<div>
				<div class="canvas-config">
					<el-select
						v-model="preViewScaleRatio"
						style="border: 2px solid #fff"
						@change="changeScaleHandle"
					>
						<el-option
							v-for="item in scaleOptions"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>
				</div>
				<el-button
					v-if="$route.query.method != 'scanPicture'"
					@click="close"
					class="close"
					>关闭</el-button
				>
			</div>
		</div>
		<div id="previewTopology" class="canvas-container"></div>
	</div>
</template>
<script lang="ts" setup>
import {
	reactive,
	ref,
	onMounted,
	defineProps,
	defineEmits,
	watch,
	nextTick,
} from "vue";
import { Options, Pen, Topology } from "@topology/core";
import { activityDiagram } from "@topology/activity-diagram";
import { classPens } from "@topology/class-diagram";
import { sequencePens, sequencePensbyCtx } from "@topology/sequence-diagram";
import useTopology from "@/src/store/topology";
import useScaleOptions from "@/src/hooks/useScaleOptions";
import useZoomCanvas from "@/src/hooks/useZoomCanvas";

const props = defineProps({
	show: {
		type: Boolean,
		default: false,
	},
});
const emits = defineEmits(["update:show"]);
const {preViewScaleRatio, changeScaleHandle} = useZoomCanvas('preViewTopology');

const topologyStore = useTopology();
const scaleOptions = useScaleOptions();
const topologyOptions: Options = {
	grid: true, //显示网格
	rule: false, //显示标尺
	gridSize: 5, //网格大小
	minScale: 0.5,
	maxScale: 2,
	scroll: false,
	disableScale: true,
	disableAnchor: true, //禁止设置锚点
	disableRotate: true, //禁止旋转
};
const statusColorList = reactive([
	{
		name: "未陈列",
		color: "#2EEF08",
	},
	{
		name: "已陈列",
		color: "orange",
	},
	{
		name: "陈列已满",
		color: "red",
	},
]);
const typeOptions = reactive([
	{
		label: "陈列区域",
		value: "bigArea",
	},
	{
		label: "陈列区域名称",
		value: "bigAreaNo",
	},
	{
		label: "器材",
		value: "equipment",
	},
	{
		label: "器材名称",
		value: "equipmentNo",
	},
]);
const checkList = ref(["陈列区域", "陈列区域名称", "器材", "器材名称"]);
watch(
	() => props.show,
	(newVal) => {
		if (newVal) {
			nextTick(() => {
				const createTopology = new Topology("previewTopology", topologyOptions);
				const data = topologyStore.topology?.data()!;
				topologyStore.preViewTopology = createTopology;
				changeScaleHandle()
				createTopology.addPens(data.pens);
				createTopology?.lock(2);
			});
		}
	}
);
onMounted(() => {
	// console.log(props.show)
	// const createTopology = new Topology("previewTopology", topologyOptions);
	// 	const data = topology.value?.data();
	// 	console.log(data);
	// 	// createTopology.register(activityDiagram());
	// 	// createTopology.register(classPens());
	// 	// createTopology.register(sequencePens());
	// 	// createTopology.registerCanvasDraw(sequencePensbyCtx());
});
function close() {
	topologyStore.preViewTopology = null;
	emits("update:show", false);
}
</script>
<style lang="less" scoped>
.preview-main {
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	position: fixed;
	background: #fff;
	z-index: 110;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: auto;
	.title {
		width: 100%;
		background: #fff;
		padding: 10px 20px;
	}
	.toolbar {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 10px;
		white-space: nowrap;
		background: #fff;
		border-bottom: 1px solid #ddd;
		.canvas-config {
			display: inline-block;
			margin-left: 10px;
			font-size: 14px;
			color: #606266;

			input {
				width: 50px;
				margin-left: 10px;
				outline: none;
				padding: 0 5px;
				border: 1px solid #ddd;
				color: #606266;
			}

			span {
				margin-left: 10px;
			}
		}
	}
	.canvas-container {
		width: 100%;
		height: 100%;
		overflow: auto;
		.canvas {
			transform-origin: top left;
			background: #fff;
			position: relative;
			margin: auto;
		}
	}
}
</style>
